<template>
  <div class="header-boxx">
    <header>
      <ul>
        <li><a href="#" class="shouye">首页</a></li>
        <li><a href="#">推荐</a></li>
      </ul>
      <div class="seach">
        <span class="iconfont icon-sousuo1"></span>
        <input type="text" placeholder="搜索相关内容" />
      </div>
    </header>
  </div>
</template>

<script>
export default {
  name: "Header",
};
</script>

<style scoped>

@import url("../assets/font/font1/iconfont.css");

header {
  width: 100%;
  position: fixed;
  top: 0;
  height: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fefefe;
  z-index: 10;
}

header ul {
  height: 0.8rem;
  display: flex;
  flex-direction: row;
  line-height: 0.8rem;
}

header ul li a {
  display: block;
  height: 0.8rem;
  margin: 0 10px;
  font-size: 0.16rem;
  color: #8e8e8e;
}

header ul li .shouye {
  font-size: 0.22rem;
  color: #040404;
  border-bottom: 2px solid blue;
}
header .seach {
  margin-right: 0.35rem;
  position: relative;
}

header .seach .iconfont {
  float: left;
  font-size: 0.16rem;
  position: absolute;
  top: 0.05rem;
  left: 0.03rem;
}
header input {
  float: right;
  display: block;
  width: 1rem;
  height: 0.3rem;
  border-radius: 0.15rem;
  background-color: #f9f8fe;
  border: 0;
  padding-left: 20px;
}
</style>